﻿@page "/chart/spline-area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart'>Blazor Spline Area Chart</a> example visualizes the data about inflation rate comparision for three countries by using spline area series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure a spline area type chart. The spline area type chart is an area type chart that plots a fitted curve through each data point in a series. It is used to represent time-dependent data and show trends in data at equal intervals.</p>
    <p>More information about the spline area series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/spline-area'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Inflation Rate in Percentage" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" Minimum="0" Maximum="4" Interval="1">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="US" XName="Period" Width="2"
                         Opacity="0.5" YName="US_InflationRate" Type="ChartSeriesType.SplineArea">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="France" XName="Period" Width="2"
                         Opacity="0.5" YName="FR_InflationRate" Type="ChartSeriesType.SplineArea">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Germany" XName="Period" Width="2"
                         Opacity="0.5" YName="GER_InflationRate" Type="ChartSeriesType.SplineArea">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<SplineAreaChartData> ChartPoints { get; set; } = new List<SplineAreaChartData>
    {
        new SplineAreaChartData { Period = new DateTime(2002, 01, 01), US_InflationRate = 2.2, FR_InflationRate = 2, GER_InflationRate = 0.8  },
        new SplineAreaChartData { Period = new DateTime(2003, 01, 01), US_InflationRate = 3.4, FR_InflationRate = 1.7, GER_InflationRate = 1.3 },
        new SplineAreaChartData { Period = new DateTime(2004, 01, 01), US_InflationRate = 2.8, FR_InflationRate = 1.8, GER_InflationRate = 1.1 },
        new SplineAreaChartData { Period = new DateTime(2005, 01, 01), US_InflationRate = 1.6, FR_InflationRate = 2.1, GER_InflationRate = 1.6 },
        new SplineAreaChartData { Period = new DateTime(2006, 01, 01), US_InflationRate = 2.3, FR_InflationRate = 2.3, GER_InflationRate = 2 },
        new SplineAreaChartData { Period = new DateTime(2007, 01, 01), US_InflationRate = 2.5, FR_InflationRate = 1.7, GER_InflationRate = 1.7 },
        new SplineAreaChartData { Period = new DateTime(2008, 01, 01), US_InflationRate = 2.9, FR_InflationRate = 1.5, GER_InflationRate = 2.3 },
        new SplineAreaChartData { Period = new DateTime(2009, 01, 01), US_InflationRate = 3.8, FR_InflationRate = 2.8, GER_InflationRate = 2.7 },
        new SplineAreaChartData { Period = new DateTime(2010, 01, 01), US_InflationRate = 1.4, FR_InflationRate = 1.5, GER_InflationRate = 1.1 },
        new SplineAreaChartData { Period = new DateTime(2011, 01, 01), US_InflationRate = 3.1, FR_InflationRate = 2.3, GER_InflationRate = 2.3 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class SplineAreaChartData
    {
        public DateTime Period { get; set; }
        public double US_InflationRate { get; set; }
        public double FR_InflationRate { get; set; }
        public double GER_InflationRate { get; set; }
    }
}
